<style>
    #productForm .file {
        position: relative;
    }

    #productForm .file input[type="file"] {
        position: absolute;
        width: 94%;
        height: 100%;
        opacity: 0;
        top: 0;
    }

    #productForm img {
        padding: 0 15px;
        max-width: 75%;
    }
</style>
<form class="form-horizontal" role="form" id="productForm">
    <input type="hidden" name="id">
    <div class="form-group">
        <label  class="col-sm-3 control-label">产品图片</label>
        <div class="col-sm-9 file">
            <input type="text" class="form-control" placeholder="请选择产品图片" name="pictureAddress"/>
            <input type="file" name="file"  accept="image/*"/>

        </div>
        <img class="col-sm-offset-3">
    </div>
    <div class="form-group">
        <label  class="col-sm-3 control-label">产品名称</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="productName"/>
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-3 control-label">产地</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="productArea" />
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-3 control-label">存储方式</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" name="storageMethod"/>
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-3 control-label">产品类别</label>
        <div class="col-sm-9">
            <select type="text" class="form-control select2" name="productTypeId"></select>
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-3 control-label">保质期(单位为天)</label>
        <div class="col-sm-9">
            <input type="number" class="form-control" name="shelfLife" />
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-3 control-label">产品简介</label>
        <div class="col-sm-9">
            <textarea type="text" class="form-control" name="productIntroduction" />
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-3 control-label">产品详情</label>
        <div class="col-sm-9">
            <textarea type="text" class="form-control" name="productInfo" />
        </div>
    </div>
</form>

<script>
    $(function () {
        var reader = new FileReader();
        $('#productForm').on("change","[name='file']",function(){
            $(this).prev().val($(this).val());
            reader.readAsDataURL(this.files[0]);
        });
        reader.onload = function(e) {
            $('#productForm').find("img").attr("src",e.target.result).show();
        }
        $("#productForm [name='productTypeId']").loadSelect2(
            "${basePath}/manager/product/getProductTypeByName",
            "请输入名称查询",1,"name","name");

        var interval=setInterval(function () {
            if($("#productForm .select2").length>0){
                $("#productForm .select2").width("100%");
                clearInterval(interval);
            }
        },100);
    })
</script>